<template>
  <div class="main-view generic-http-receive-service">
    <div class="receive-service-info">
      <div class="info">
        <div class="label">IP</div>
        <div class="input">
          <el-select v-model="state.receive_service_info.ip" placeholder="请选择IP">
            <el-option v-for="ip in state.ip_list" :key="ip" :label="ip" :value="ip"></el-option>
          </el-select>
        </div>
      </div>
      <div class="info">
        <div class="label">端口</div>
        <div class="input"><el-input v-model="state.receive_service_info.port"></el-input></div>
      </div>
      <div class="buttons">
        <el-button type="primary" :disabled="state.receive_service_info.enable" @click="onStart">开启接收</el-button>
        <el-button type="danger" :disabled="!state.receive_service_info.enable" @click="onClose">关闭</el-button>
      </div>
    </div>
    <!--接收日志-->
    <div id="logScrollbar" class="receive-service-logs">
      <el-scrollbar :max-height="getMaxHeight" always>
        <div id="logList" class="receive-service-log-list">
          <template v-for="(item, idx) in state.log_list" :key="idx">
            <div v-if="item.type === 'log'" class="log-item">
              {{ item.log }}
            </div>
            <div v-else-if="item.type === 'request' && item.method === 'POST'" class="log-item-request">
              <div>
                <el-button type="primary" style="margin-right: 5px">{{ item.method }}</el-button>
                <el-text type="primary">{{ item.url }}</el-text>
                <el-text type="info" style="margin-right: 15px; margin-left: 15px">content-type</el-text>
                <el-text type="primary">{{ item.content_type }}</el-text>
              </div>
              <div v-if="item.content_type === 'application/json'" class="log-item-request-body">
                <VueJsonPretty :data="item.body" :deep="3" show-length show-line show-line-number theme="dark">
                  <template #renderNodeValue="{ defaultValue }">
                    <el-text class="w-150px mb-2" truncated>
                      {{ defaultValue }}
                    </el-text>
                  </template>
                </VueJsonPretty>
              </div>
              <div v-else class="log-item-request-body">
                {{ item.body }}
              </div>
            </div>
            <div v-else-if="item.type === 'request' && item.method === 'GET'" class="log-item-request">
              <div>
                <el-button type="primary" style="margin-right: 5px">{{ item.method }}</el-button>
                <el-text type="primary">{{ item.url }}</el-text>
              </div>
              <div class="log-item-request-body">
                {{ item.body }}
              </div>
            </div>
          </template>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, computed, onUnmounted } from 'vue';
import { GenericHttpReceiveServiceState } from '@/renderer/views/generichttpreceiveservice/interface';
import VueJsonPretty from 'vue-json-pretty';
import 'vue-json-pretty/lib/styles.css';

const state = reactive<GenericHttpReceiveServiceState>(new GenericHttpReceiveServiceState());

const getMaxHeight = computed(() => {
  return document.body.offsetHeight - 50 - 40 - 32;
});

const scrollToBottom = () => {
  window.setTimeout(() => {
    // @ts-ignore
    document.getElementById('logScrollbar').getElementsByClassName('el-scrollbar__wrap')[0].scrollTop = 10000000;
  }, 200);
};

const onStart = () => {
  state.server = window.api.createHttpService(
    state.receive_service_info.ip,
    Number(state.receive_service_info.port),
    (str: string) => {
      state.log_list.push({
        type: 'log',
        log: str
      });
      scrollToBottom();
    },
    (method: string, url: string, type: string, body: string) => {
      if ('application/json' === type) {
        state.log_list.push({
          type: 'request',
          method: method,
          url: url,
          content_type: type,
          body: JSON.parse(body)
        });
      } else {
        state.log_list.push({
          type: 'request',
          method: method,
          url: url,
          content_type: type,
          body: body
        });
      }
      scrollToBottom();
    },
    () => {
      state.receive_service_info.enable = true;
    },
    (err) => {
      state.receive_service_info.enable = false;
    }
  );
};

const onClose = () => {
  console.log(state);
  state.server && state.server.close();
  state.receive_service_info.enable = false;
};

onMounted(() => {
  const ipList: string[] = window.api.getNetworkInterfaces();
  for (const ip of ipList) {
    state.ip_list.push(ip);
  }
  state.receive_service_info.ip = state.ip_list[0];
});
onUnmounted(() => {
  onClose();
});
</script>

<style scoped lang="scss">
.generic-http-receive-service {
  .receive-service-info {
    height: 40px;
    line-height: 40px;
    display: flex;
    flex-direction: row;
    .info {
      height: 40px;
      line-height: 40px;
      display: flex;
      flex-direction: row;
    }
    .buttons {
      padding-left: 15px;
      height: 40px;
      line-height: 40px;
    }
    .label {
      width: 80px;
      text-align: right;
      padding-right: 10px;
    }
    .input {
      width: 200px;
    }
  }
}
</style>
